<template>
  <div class="item-config">
    <el-form
       label-position="top"
       label-width="100px"
      :model="haloConfigForm"
      ref="halo-form"
      :rules="haloConfigRules"
    >
       <div class="sql-agent-connected sql-agent--block flex overflow-hidden" v-if="success">
         <div
           class="sql-agent-connected__left flex flex-1 flex-col justify-between"
         >
           <span>webhook callback url</span>
           <span>{{ `https://app.maibozhineng.com/halo/notice/${this.$store.state.user.tenantCode}/callback` }}</span>
         </div>
         <ZIcon
            @click="copyUrl"
            :content="'copy'"
            icon="el-icon-document-copy"
            hover
            style="margin-right: 16px;margin-top: 26px;"
            tooltip
          />
       </div>
       <el-form-item :label="$t('custom.connector.halo.authUrl')" prop="authUrl">
        <el-input
          v-model="haloConfigForm.authUrl"
          :placeholder="$t('custom.connector.halo.interauthUrl')"
        >
        </el-input>
      </el-form-item>
       <el-form-item :label="$t('custom.connector.halo.resourceUrl')" prop="resourceUrl">
        <el-input
          v-model="haloConfigForm.resourceUrl"
          :placeholder="$t('custom.connector.halo.interResourceUrl')"
        >
        </el-input>
      </el-form-item>
       <el-form-item :label="$t('custom.connector.halo.tenant')" prop="tenant">
        <el-input
          v-model="haloConfigForm.tenant"
          :placeholder="$t('custom.connector.halo.intertenant')"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.halo.clientId')" prop="clientId">
        <el-input
          v-model="haloConfigForm.clientId"
          :placeholder="$t('custom.connector.halo.interclientId')"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.halo.clientSecret')" prop="clientSecret">
        <el-input
          v-model="haloConfigForm.clientSecret"
          :type="SecretKeyCheck?'text':'password'"
          :placeholder="$t('custom.connector.halo.interclientSecret')"
        >
        <i slot="suffix" :class="SecretKeyCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                      @click="SecretKeyCheck=!SecretKeyCheck"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="testLoading"
          style="width:165px;margin-top: 6px;"
          size="small"
          @click="startTestConfig"
          >{{ $t('custom.connector.savequickbookspath') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'
import ZIcon from '@/components/storybook/z-icon'

export default {
  mixins: [Trail],

  props: {
    haloConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    success :{
      type: Boolean,
      default: false
    }
  },
  components: {
    ZIcon,
  },

  data () {
    return {
      SecretKeyCheck: false,
      haloConfigRules: {
        authUrl: [
          {
            required: true,
            message: this.$t('custom.connector.halo.interauthUrl'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        resourceUrl: [
          {
            required: true,
            message: this.$t('custom.connector.halo.interResourceUrl'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        tenant: [
          {
            required: true,
            message: this.$t('custom.connector.halo.intertenant'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        clientId: [
          {
            required: true,
            message: this.$t('custom.connector.halo.interclientId'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.$t('custom.connector.halo.interclientSecret'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ]
      },
      testLoading: false
    }
  },
  created () {
    
  },
  methods: {
    copyUrl () {
      navigator.clipboard.writeText(`https://app.maibozhineng.com/halo/notice/${this.$store.state.user.tenantCode}/callback`).then(() => {
        this.$message.success('Copy Success.')
      }, () => {
        this.$message.error('Copy Failed.')
      })
    },
    cancelThisConfig () {
      this.haloConfigForm = {
        datacenterUrl: null,
        clientId: null,
        clientSecret: null
      }
    },
    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        const params = {
          ...this.haloConfigForm,
          tenantId: this.$store.state.user.tenantCode,
          subjectCode: 'HALO'
        }
        this.$interface.taskManager
          .postClientData(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.testLoading = false
              Component.$emit('getConnectorConfig')
              return this.$message.error(res.msg)
            }
            this.testLoading = false
            this.synctdData()
            return this.$message.success(res.msg)
          }).catch(() => {
            this.testLoading = false
          })
      })
    },
    validateConfigForm () {
      return this.$refs['halo-form'].validate()
    },
    synctdData (itemInfo) {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'HALO'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        if (itemInfo && res.data && res.data.sync) {
          itemInfo.sync.lastTime = res.data.sync.lastTime
          itemInfo.sync.status = res.data.sync.status
        }
        Component.$emit('getConnectorConfig')
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    detail () {

    }
  }
}
</script>

<style scoped lang="scss">
.sql-agent {
  padding: 10px 0 10px 80px;
  &-connected {
    &__left {
      font-size: 16px;
      span:nth-child(1) {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
  &-connector {
    padding: 12px 0;
  }
  &--block {
    padding: 8px;
    background: rgba(246, 246, 246, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  &-db {
    &-item {
      margin-bottom: 16px;
      &:last-of-type {
        margin-bottom: 0 !important;
      }
      &__header {
        &__left {
          &-title {
            font-size: 16px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
          }
          &-bottom {
            padding: 5px 0;
            &__left {
              padding-right: 16px;
            }
          }
        }
      }

      &__content {
        transition: height 200ms;
      }
    }
  }
}
</style>
